<template>
  <div>
    <commpVxeTable
      :key="reCommpVxeTable"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:externalOperations="{data}"  >
        <vxe-form-item>
          <template>
            <a-button class="blue-btn" style="margin-right:10px;" type="primary" @click="addHandele">添加</a-button>
            <a-button class="red-btn" type="primary" @click="deleteBatchHandele">批量删除</a-button>
          </template>
        </vxe-form-item>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
            <a-form-item>
                <a-button class="blue-btn" type="primary" @click="editHandele(row)">编辑</a-button>
            </a-form-item>
            <a-form-item>
                <a-popconfirm
                    title="您确定要删除这条数据吗?"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="deleteHandele(row)"
                    @cancel="cancel"
                    >
                        <a-button class="red-btn">删除</a-button>
                </a-popconfirm>
            </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <handleModal ref="handleModalRef" :passObj="passObj" @success="success"></handleModal>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal.vue'
import { deletes,deleteBatch, } from './service/index.js'
export default {
  components: {
    commpVxeTable,handleModal
  },
  props:{
    linkName:{
      type:String,
      default:'',
      required:false,
    }
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet:{}
      },
      formItem: [
        {
          label: '登记人',
          model: 'fdjr',
        },{
          label: '登记人部门',
          model: 'fdjrbm',
        },{
          label: '金额',
          model: 'fje',
        },
      ],
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '登记人',
          field: 'fdjr',
        },{
          title: '登记人部门',
          field: 'fdjrbm',
        },{
          title: '金额',
          field: 'fje',
        },{
          title: '来源',
          field: 'fly',
        },{
          title: '说明',
          field: 'fsm',
        },{
          title: '操作',
          field: 'jobid',
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      idList: [],
      passObj: {},
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    addHandele(){
        this.$nextTick(_ => {
            this.$refs.handleModalRef.handleModalVisible = true
        })
    },
    // 编辑
    editHandele(row){
        this.passObj = row
        this.$nextTick(_ => {
            this.$refs.handleModalRef.handleModalVisible = true
        })
    },
    // 删除
    deleteHandele(row){
        deletes({id:row.id}).then(res => {
            if(res.code == 200){
                this.$message.success(res.message)
                this.reCommpVxeTable = Date.now()
            } else {
                this.$message.warning(res.message)
            }
        })
    },
    // 批量删除
    deleteBatchHandele(){
        let that = this
        if(that.idList.length == 0){
            that.$message.warning('请选择删除项目')
        } else {
            that.$confirm({
                title: '您确定要删除这些数据吗?',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    let list = that.idList.toString()
                    //console.log(list)
                    deleteBatch({ids:list}).then(res => {
                        //console.log(res)
                        if(res.code == 200){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        }
    },
    cancel(){},
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.searchEvent()
      this.idList = []
    },
  },
}
</script>
<style lang="less">
.red-btn{
    color:  white !important;
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
</style>
